<template>
  <div class="body">
    <div>
      <div>
        <div>
          <div>姓名</div>
          <div>留言</div>
          <div>操作</div>
        </div>
      </div>
      <div class="js_content">
        张三 你好
      </div>
    </div>
    <div>
      <div>
        姓名: <input type="text" class="name">
      </div>
      <div>
        留言: <input type="text" class="content">
      </div>
      <div>
        <MyBtn class="js_mybtn" name="父子传参1"></MyBtn>
        <button class="save">保存</button>
        <button class="js_mybtn2">父子传参</button>
        <button class="js_mybtn3">父子复杂类型</button>
        <MyBtn class="js_btn4" onMyclick="mybtnClick"></MyBtn>
      </div>
    </div>
  </div>
</template>
<import name="MyBtn" src="./MyBtn.jq"></import>
<script>
  export default function ($) {
    let data = [{ id: 0, name: '反取消', content: '111' }];
    let id = 1;

    $('.js_btn4').on('onMyclick', function() {
      alert('哦哦哦')
    })

    $(".save").click(saveForm);

    render(data);

    function render(data) {
      let htmls = [];
      data.forEach(({name, content}) => {
        htmls.push(`
          <div>
            <span>${name}</span>
            <span>${content}</span>
            <span><MyBtn></MyBtn></span>
          <div>
        `);
      });
      
      $('.js_content').html({
        template: `<div>${htmls.join('')}</div>`,
        components: { MyBtn },
        ready($) {
          console.log($.el);
        }
      })
    };

    function saveForm() {
      const name = $(".name").val();
      const content = $(".content").val();
      id++;
      data.push({
        id,
        name,
        content
      });
      render(data);
    }

    $('.js_mybtn').on('childClick', function (evt, param) {
      console.log(param);
    });


    $('.js_mybtn2').click(function () {
      $('.js_mybtn').attr('data-id', 1);
    });

    $('.js_mybtn3').click(function () {
      $('.js_mybtn').data('json', { name: 'json', age: 98 });
    });

  }
</script>
<style>
  .body {
    width: 100%;
    background: yellowgreen;
    height: 400px;
  }

  .body table {
    width: 100%;
  }
</style>